<!-- 选择小队、小组弹框 -->
<template>
  <div class="sel-team-group">
    <el-cascader 
      ref="teamGroupRef"
      :style="{'width': isNaN(width) ? width : width+'px'}"
      v-model="curval"
      :placeholder="tipText"
      :options="options"
      :props="{ multiple: isMult, checkStrictly: isSelAny, emitPath: true, value: 'id', label: 'name' }"
      :collapse-tags="true"
      :clearable="true"
      @change="handleChange">
      <template slot-scope="{ node, data }">
        <span>{{ data.name }}</span>
        <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
      </template>
    </el-cascader>
  </div>
</template>

<script>
import * as commonService from '@/api/services/common.service';

export default {
  name: 'SelTeamGroup',
  props: {
    // 查询的部门
    deptNames: {
      type: String,
      default: '车务部'
    },
    // 参数名称，标记作用
    pname: {
      type: String,
      default: 'selName'
    },
    // 默认值
    defval: {
      type: Array,
      default: function(){
        return [];
      }
    },
    // 输入框的宽度
    width: {
      type: [Number, String],
      default: 160
    },
    // 是否可多选
    isMult: {
      type: Boolean,
      default: true
    },
    // 是否选择任意一项
    isSelAny: {
      type: Boolean,
      default: false,
    },
    // 输入框提示文本
    tipText: {
      type: String,
      default: '请选择小队/小组'
    }
  },
  watch: {
    defval: {
      handler(o){
        console.log('监听默认值', o);

        if(o){
          if(this.srcList.length == 0){
            this.curval = o;
          }else{
            /********回填赋值--begin************/
            // 遍历传入的值，循环找到与值关联的上级对象数组
            o.forEach(it => {
              let valArr = this.U.findP2CArr(this.srcList, 'id', 'pid', it);

              let v = [];
              valArr.forEach(a => {v.push(a.id)});
              // 依次存入值中
              this.isMult ? this.curval.push(v) : this.curval = v;
            });
            /********回填赋值--end**************/
          }
        }
      }
    }
  },
  data() { 
    return {
      // 当前选中的值对象
      curval: [],

      // 列表源数据
      srcList: [],
      // 列表
      options: []
    }
  },
  created(){
    console.log('传入的默认值', this.defval, this.width);
    this.getSelList();
  },
  methods:{
    // 获取下拉列表数据
    getSelList(){
      const that = this;

      commonService.getTeamGroupList({deptNames: that.deptNames}).then(res => {
        if(res.code == 1){
          let list = res.data;
          that.srcList = list;
          
          /********回填赋值--begin************/
          // 遍历传入的值，循环找到与值关联的上级对象数组
          that.defval.forEach(it => {
            let valArr = that.U.findP2CArr(list, 'id', 'pid', it);

            let v = [];
            valArr.forEach(a => {v.push(a.id)});
            // 依次存入值中
            that.isMult ? that.curval.push(v) : that.curval = v;
          });
          /********回填赋值--end**************/

          that.options = that.U.line2treeData(list, 'pid');
        }
      });
    },
    // 点击
    handleChange(valarr){
      console.log('点击了', valarr);
      
      // 处理数据，只传最后一个子节点值给父组件
      let resval = [];
      if(this.isMult){// 多选
        valarr.forEach(it => { resval.push(it[it.length - 1]); });
      }else{// 单选
        // 始终获取最后一个子节点的值
        if(valarr.length > 0) resval = [valarr[valarr.length - 1]];
      }
      console.log('传给父组件的值', resval);
      this.$emit('selItem', {name: this.pname, val: resval});
    }

  },
 }
</script>

<style lang="less" scoped>
.sel-team-group{
  display: inline-block;
}
</style>